<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>

    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../static/css/main.css" th:href="@{/css/main.css}">
    <style type="text/css">
        body {
            background-color: #DADADA;
        }

        body > .grid {
            height: 100%;
        }

        .image {
            margin-top: -100px;
        }

        .column {
            max-width: 450px;
        }
    </style>
</head>
<body>

<div class="ui middle aligned center aligned grid">
    <div class="column">
        <h2 class="ui teal image header">
            <!--            <img src="assets/images/logo.png" class="image">-->
            <div class="content">
                后台管理登录
            </div>
        </h2>
        <form class="ui large form" method="post" action="#" th:action="@{/admin/login}">
            <div class="ui segment">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="username" placeholder="用户名" value="misty">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="password" placeholder="密码" value="123456">
                    </div>
                </div>
                <button class="ui fluid large teal submit button">登 录</button>
            </div>

            <div class="ui error mini message"></div>
            <div class="ui negative mini message" th:unless="${#strings.isEmpty(message)}" th:text="${message}"></div>
        </form>
    </div>
</div>

<!--/*/ <th:block th:replace="admin/_fragments::scripts"> /*/-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>
<!--/*/ </th:block> /*/-->

<script>
    $(document).ready(function () {
        $('.ui.form').form({
            fields: {
                username: {
                    identifier: 'username',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入用户名'
                    }]
                },
                password: {
                    identifier: 'password',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入密码'
                    }/*, {
                        type: 'length[6]',
                        prompt: 'Your password must be at least 6 characters'
                    }*/]
                }
            }
        });
    });
</script>
</body>
</html>
